<template>
	<view>	        
	<u-popup v-model="showpopup" mode="center"  :zoom="true" @close="closepopup">
			<view class="content">
			
				<view class="flex-content">
					<image :src="item.photo" mode="widthFix"></image>
				</view>
				<view class="flex-content">
					
				
				<view class="content-char" >
					{{item.tip}}
				</view>
				</view>
				<view class="">
					
				</view>
				<view class="upload-botton">
					<view class="shoot flex-content" @click="photograph">
						拍照
					</view>
					<view class="Photo-select flex-content">
						从相册选择
					</view>
				</view>
				<view class="close-content flex-content" @click="closepopup">
					取消
				</view>
			</view>
			</u-popup>
	</view>
</template>

<script>
	import store from '../../store'
	import {
		baseURL
	} from '../../config/app'
	export default {
		name:"upload-masklayer",
		props:{
			show:{
				type:Boolean,
				default:false
			},
			item:{
				type:Object,
				default:()=>{}
			}
		},
		created() {
			this.showpopup=this.show
		},
		data() {
			return {
				action: baseURL + '/api/file/formimage',
				header:{},
				showpopup:false,
			};
			
		},
		created() {
			this.header.token = store.getters.token
		},
		methods:{
			
			photograph(){
				const _this = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.uploadFile({
							url: _this.action,
							filePath: res.tempFilePaths[0],
							name: "file",
							header: _this.header,
							success: (res) => {
								const response = JSON.parse(res.data)
						
						  _this.$emit("upsuccess",{
							  id:_this.item.id,
							  uri:response.data.uri
						  })
						
						this.closepopup(this.item.id)
							}
				
						})
				
					}
				})
			},
			closepopup(){

			
				this.$emit("closepopup",this.item.id)
			}
		},
		watch:{
			show(newvalue,old){
				this.showpopup=newvalue
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.close-content{
		color: #868686;
		border-radius: 10rpx;
		margin-top: 30rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		font-size: 35rpx
	}
	.shoot{
		color: #868686;
		height: 100rpx;
		font-size: 35rpx;
		border-bottom: 1rpx solid #868686;
	}
	.upload-botton{
		margin-top: 200rpx;
		border-radius: 10rpx;
		
		background-color: #FFFFFF;
		width: 700rpx;
	}
	.content-char{
		
		width: 600rpx;
	}
	.Photo-select{
		color: #868686;
		height: 100rpx;
		font-size: 35rpx;
	}
.content{
	.flex-content{
		
		image{
				width: 500rpx;
		}
	
	}
	
}
.content-char{
	margin-top: 40rpx;
	width: 650rpx;
	color: #FFFFFF;
}
</style>
